<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
</body>
<script>
    // 下述 定义的对象，具有构成HTML 标签结构的特殊配置
    // 且通过固定方法 可以转换为 DOM对象，在框架该对象被叫做 虚拟DOM vnode
    let obj = {
        tag:"h1",
        class:[],
        style:{
            color:"red"
        },
        children:[
            {
                tag:"p",
                class:["a","c"],
                style:{},
                children:[
                    "文本"
                ]
            },
            "测试文本",
            {
                tag:"p",
                class:[],
                style:{
                    color:"blue"
                },
                children:[
                    "文本",
                    {
                        tag:"span",
                        class:[],
                        style:{
                            color:"pink"
                        },
                        children:[
                            "span标签"
                        ]
                    }
                ]
            },
        ]
    }

    // let tempdom = document.createElement(obj.tag);
    // for (let v of obj.class) {
    //     tempdom.className = tempdom.className+" "+v;
    // }
    // for (const key in obj.style) {
    //     tempdom.style[key] = obj.style[key]
    // }

    // for (let child of obj.children) {
    //     let cdom = null;
    //     if(typeof(child)=="string"){
    //         cdom = document.createTextNode(child);
    //     }else{
    //         cdom = document.createElement(child.tag);
    //         for (let v of child.class) {
    //             cdom.className = cdom.className+" "+v;
    //         }
    //         for (const key in child.style) {
    //             cdom.style[key] = child.style[key]
    //         }
    //     }
    //     tempdom.appendChild(cdom);
    // }
    // console.log(tempdom);
    // document.body.appendChild(tempdom);

    function createElemet(obj){
        let dom = document.createElement(obj.tag);;

        for (let v of obj.class) {
            dom.className = dom.className+" "+v;
        }
        for (const key in obj.style) {
            dom.style[key] = obj.style[key]
        }

        for (let child of obj.children) {
            let cdom = null;
            if(typeof(child)=="string"){
                cdom = document.createTextNode(child);
            }else{
                cdom = createElemet(child);
            }
            dom.appendChild(cdom);
        }

        return dom;
    }

    let dom = createElemet(obj)
    console.log(dom);
    document.body.appendChild(dom)

</script>
</html>